<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jsMind</title>
        <link type="text/css" rel="stylesheet" href="../style/jsmind.css" />
        <style type="text/css">
            li {
                margin-top: 2px;
                margin-bottom: 2px;
            }
            button {
                width: 140px;
            }
            select {
                width: 140px;
            }
            #layout {
                width: 1230px;
            }
            #jsmind_nav {
                width: 210px;
                height: 600px;
                border: solid 1px #ccc;
                overflow: auto;
                float: left;
            }
            .file_input {
                width: 100px;
            }
            button.sub {
                width: 100px;
            }

            #jsmind_container {
                float: left;
                width: 1000px;
                height: 600px;
                border: solid 1px #ccc;
                background: #f4f4f4;
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="jsmind_nav">
                <div>1. Open</div>
                <ol type="A">
                    <li><button onclick="open_json();">open example</button></li>
                    <li><button onclick="open_ajax();">open remote</button></li>
                    <li>
                        <button onclick="prompt_info('see 6.Multi Format');">
                            open local file
                        </button>
                    </li>
                    <li>
                        <button onclick="prompt_info('see 6.Multi Format');">
                            save local file
                        </button>
                    </li>
                    <li><button onclick="screen_shot();">screenshot</button></li>
                </ol>
                <div>2. Select &amp; Toggle</div>
                <ol type="A">
                    <li><button onclick="select_node();">select a node</button></li>
                    <li>
                        <button onclick="prompt_info('please try click a node');">
                            try click a node
                        </button>
                    </li>
                    <li><button onclick="show_selected();">get the selected</button></li>
                </ol>
                <div>3. Edit</div>
                <ol type="A">
                    <li><button onclick="toggle_editable(this);">disable editable</button></li>
                    <li><button onclick="add_node();">add a node</button></li>
                    <li><button onclick="add_image_node();">add a image node</button></li>
                    <li><button onclick="modify_node();">modify node</button></li>
                    <li>
                        <button onclick="prompt_info('please try double click a node');">
                            try double click
                        </button>
                    </li>
                    <li><button onclick="move_node();">move a node</button></li>
                    <li><button onclick="move_to_first();">move to first</button></li>
                    <li><button onclick="move_to_last();">move to last</button></li>
                    <li><button onclick="remove_node();">remove node</button></li>
                </ol>
                <div>4. Style</div>
                <ol type="A">
                    <li><button onclick="change_text_font();">change font</button></li>
                    <li><button onclick="change_text_color();">change color</button></li>
                    <li><button onclick="change_background_color();">change bg-color</button></li>
                    <li><button onclick="change_background_image();">change background</button></li>
                </ol>
                <div>5. Theme</div>
                <ol type="A">
                    <li>
                        <select onchange="set_theme(this.value);">
                            <option value="">default</option>
                            <option value="primary">primary</option>
                            <option value="warning">warning</option>
                            <option value="danger">danger</option>
                            <option value="success">success</option>
                            <option value="info">info</option>
                            <option value="greensea" selected="selected">greensea</option>
                            <option value="nephrite">nephrite</option>
                            <option value="belizehole">belizehole</option>
                            <option value="wisteria">wisteria</option>
                            <option value="asphalt">asphalt</option>
                            <option value="orange">orange</option>
                            <option value="pumpkin">pumpkin</option>
                            <option value="pomegranate">pomegranate</option>
                            <option value="clouds">clouds</option>
                            <option value="asbestos">asbestos</option>
                        </select>
                    </li>
                </ol>
                <div>6. Adjusting</div>
                <ol type="A">
                    <li>
                        <button onclick="change_container();">resize container</button>
                        <button onclick="resize_jsmind();">adusting</button>
                    </li>
                    <li>expand/collapse</li>
                    <ol>
                        <li><button class="sub" onclick="expand();">expand node</button></li>
                        <li><button class="sub" onclick="collapse();">collapse node</button></li>
                        <li><button class="sub" onclick="toggle();">toggle node</button></li>
                        <li>
                            <button class="sub" onclick="expand_to_level2();">
                                expand to level 2
                            </button>
                        </li>
                        <li>
                            <button class="sub" onclick="expand_to_level3();">
                                expand to level 3
                            </button>
                        </li>
                        <li><button class="sub" onclick="expand_all();">expand all</button></li>
                        <li><button class="sub" onclick="collapse_all();">collapse all</button></li>
                    </ol>
                    <li>zoom(ctrl+mousewheel)</li>
                    <button id="zoom-in-button" style="width: 50px" onclick="zoomIn();">In</button>
                    <button id="zoom-out-button" style="width: 50px" onclick="zoomOut();">
                        Out
                    </button>
                </ol>

                <div>7. Multi Format</div>
                <ol type="A">
                    <li>node_tree(default)</li>
                    <ol>
                        <li><button class="sub" onclick="show_data();">show data</button></li>
                        <li><button class="sub" onclick="save_file();">save file</button></li>
                        <li><input id="file_input" class="file_input" type="file" /></li>
                        <li><button class="sub" onclick="open_file();">open file</button></li>
                    </ol>
                    <li>node_array</li>
                    <ol>
                        <li>
                            <button class="sub" onclick="get_nodearray_data();">show data</button>
                        </li>
                        <li>
                            <button class="sub" onclick="save_nodearray_file();">save file</button>
                        </li>
                        <li><input id="file_input_nodearray" class="file_input" type="file" /></li>
                        <li><button class="sub" onclick="open_nodearray();">open file</button></li>
                    </ol>
                    <li>freemind(.mm)</li>
                    <ol>
                        <li>
                            <button class="sub" onclick="get_freemind_data();">show data</button>
                        </li>
                        <li>
                            <button class="sub" onclick="save_freemind_file();">save file</button>
                        </li>
                        <li><input id="file_input_freemind" class="file_input" type="file" /></li>
                        <li><button class="sub" onclick="open_freemind();">open file</button></li>
                    </ol>
                </ol>
            </div>
            <div id="jsmind_container"></div>
            <div style="display: none">
                <input class="file" type="file" id="image-chooser" accept="image/*" />
            </div>
        </div>
        <script type="text/javascript" src="../js/jsmind.js"></script>
        <script type="text/javascript" src="../js/jsmind.draggable-node.js"></script>
        <script type="text/javascript" src="../js/jsmind.screenshot.js"></script>
        <script type="text/javascript">
            var _jm = null;
            function open_empty() {
                var options = {
                    container: 'jsmind_container',
                    theme: 'greensea',
                    editable: true,
                    view: {
                        draggable: true,
                    },
                };
                _jm = jsMind.show(options);
                // _jm = jsMind.show(options,mind);
            }

            function open_json() {
                var mind = {
                    meta: {
                        name: 'jsMind remote',
                        author: 'hizzgdev@163.com',
                        version: '0.2',
                    },
                    format: 'node_tree',
                    data: {
                        id: 'root',
                        topic: 'jsMind',
                        children: [
                            {
                                id: 'easy',
                                topic: 'Easy',
                                direction: 'left',
                                children: [
                                    { id: 'easy1', topic: 'Easy to show' },
                                    { id: 'easy2', topic: 'Easy to edit' },
                                    { id: 'easy3', topic: 'Easy to store' },
                                    { id: 'easy4', topic: 'Easy to embed' },
                                    {
                                        'id': 'other3',
                                        'background-image': 'ant.png',
                                        'width': '100',
                                        'height': '100',
                                    },
                                ],
                            },
                            {
                                id: 'open',
                                topic: 'Open Source',
                                direction: 'right',
                                children: [
                                    {
                                        'id': 'open1',
                                        'topic': 'on GitHub',
                                        'background-color': '#eee',
                                        'foreground-color': 'blue',
                                    },
                                    { id: 'open2', topic: 'BSD License' },
                                ],
                            },
                            {
                                id: 'powerful',
                                topic: 'Powerful',
                                direction: 'right',
                                children: [
                                    { id: 'powerful1', topic: 'Base on Javascript' },
                                    { id: 'powerful2', topic: 'Base on HTML5' },
                                    { id: 'powerful3', topic: 'Depends on you' },
                                ],
                            },
                            {
                                id: 'other',
                                topic: 'test node',
                                direction: 'left',
                                children: [
                                    { id: 'other1', topic: "I'm from local variable" },
                                    { id: 'other2', topic: 'I can do everything' },
                                ],
                            },
                        ],
                    },
                };
                _jm.show(mind);
            }

            function open_ajax() {
                var mind_url = 'data_example.json';
                jsMind.util.ajax.get(mind_url, function (mind) {
                    _jm.show(mind);
                });
            }

            function screen_shot() {
                _jm.screenshot.shootDownload();
            }

            function show_data() {
                var mind_data = _jm.get_data();
                var mind_string = jsMind.util.json.json2string(mind_data);
                prompt_info(mind_string);
            }

            function save_file() {
                var mind_data = _jm.get_data();
                var mind_name = mind_data.meta.name;
                var mind_str = jsMind.util.json.json2string(mind_data);
                jsMind.util.file.save(mind_str, 'text/jsmind', mind_name + '.jm');
            }

            function open_file() {
                var file_input = document.getElementById('file_input');
                var files = file_input.files;
                if (files.length > 0) {
                    var file_data = files[0];
                    jsMind.util.file.read(file_data, function (jsmind_data, jsmind_name) {
                        var mind = jsMind.util.json.string2json(jsmind_data);
                        if (!!mind) {
                            _jm.show(mind);
                        } else {
                            prompt_info('can not open this file as mindmap');
                        }
                    });
                } else {
                    prompt_info('please choose a file first');
                }
            }

            function select_node() {
                var nodeid = 'other';
                _jm.select_node(nodeid);
            }

            function show_selected() {
                var selected_node = _jm.get_selected_node();
                if (!!selected_node) {
                    prompt_info(selected_node.topic);
                } else {
                    prompt_info('nothing');
                }
            }

            function get_selected_nodeid() {
                var selected_node = _jm.get_selected_node();
                if (!!selected_node) {
                    return selected_node.id;
                } else {
                    return null;
                }
            }

            function add_node() {
                var selected_node = _jm.get_selected_node(); // as parent of new node
                if (!selected_node) {
                    prompt_info('please select a node first.');
                    return;
                }

                var nodeid = jsMind.util.uuid.newid();
                var topic = '* Node_' + nodeid.substr(nodeid.length - 6) + ' *';
                var node = _jm.add_node(selected_node, nodeid, topic);
            }

            var imageChooser = document.getElementById('image-chooser');

            imageChooser.addEventListener(
                'change',
                function (event) {
                    // Read file here.
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        var selected_node = _jm.get_selected_node();
                        var nodeid = jsMind.util.uuid.newid();
                        var topic = undefined;
                        var data = {
                            'background-image': reader.result,
                            'width': '100',
                            'height': '100',
                        };
                        var node = _jm.add_node(selected_node, nodeid, topic, data);
                        //var node = _jm.add_image_node(selected_node, nodeid, reader.result, 100, 100);
                        //add_image_node:function(parent_node, nodeid, image, width, height, data, idx, direction, expanded){
                    };

                    var file = imageChooser.files[0];
                    if (file) {
                        reader.readAsDataURL(file);
                    }
                },
                false
            );

            function add_image_node() {
                var selected_node = _jm.get_selected_node(); // as parent of new node
                if (!selected_node) {
                    prompt_info('please select a node first.');
                    return;
                }

                imageChooser.focus();
                imageChooser.click();
            }

            function modify_node() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                // modify the topic
                _jm.update_node(selected_id, '--- modified ---');
            }

            function move_to_first() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.move_node(selected_id, '_first_');
            }

            function move_to_last() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.move_node(selected_id, '_last_');
            }

            function move_node() {
                // move a node before another
                _jm.move_node('other', 'open');
            }

            function remove_node() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.remove_node(selected_id);
            }

            function change_text_font() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.set_node_font_style(selected_id, 28);
            }

            function change_text_color() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.set_node_color(selected_id, null, '#000');
            }

            function change_background_color() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.set_node_color(selected_id, '#eee', null);
            }

            function change_background_image() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.set_node_background_image(selected_id, 'ant.png', 100, 100);
            }

            function set_theme(theme_name) {
                _jm.set_theme(theme_name);
            }

            var zoomInButton = document.getElementById('zoom-in-button');
            var zoomOutButton = document.getElementById('zoom-out-button');

            function zoomIn() {
                if (_jm.view.zoomIn()) {
                    zoomOutButton.disabled = false;
                } else {
                    zoomInButton.disabled = true;
                }
            }

            function zoomOut() {
                if (_jm.view.zoomOut()) {
                    zoomInButton.disabled = false;
                } else {
                    zoomOutButton.disabled = true;
                }
            }

            function toggle_editable(btn) {
                var editable = _jm.get_editable();
                if (editable) {
                    _jm.disable_edit();
                    btn.innerHTML = 'enable editable';
                } else {
                    _jm.enable_edit();
                    btn.innerHTML = 'disable editable';
                }
            }

            // this method change size of container, perpare for adjusting jsmind
            function change_container() {
                var c = document.getElementById('jsmind_container');
                c.style.width = '800px';
                c.style.height = '500px';
            }

            function resize_jsmind() {
                _jm.resize();
            }

            function expand() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.expand_node(selected_id);
            }

            function collapse() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.collapse_node(selected_id);
            }

            function toggle() {
                var selected_id = get_selected_nodeid();
                if (!selected_id) {
                    prompt_info('please select a node first.');
                    return;
                }

                _jm.toggle_node(selected_id);
            }

            function expand_all() {
                _jm.expand_all();
            }

            function expand_to_level2() {
                _jm.expand_to_depth(2);
            }

            function expand_to_level3() {
                _jm.expand_to_depth(3);
            }

            function collapse_all() {
                _jm.collapse_all();
            }

            function get_nodearray_data() {
                var mind_data = _jm.get_data('node_array');
                var mind_string = jsMind.util.json.json2string(mind_data);
                prompt_info(mind_string);
            }

            function save_nodearray_file() {
                var mind_data = _jm.get_data('node_array');
                var mind_name = mind_data.meta.name;
                var mind_str = jsMind.util.json.json2string(mind_data);
                jsMind.util.file.save(mind_str, 'text/jsmind', mind_name + '.jm');
            }

            function open_nodearray() {
                var file_input = document.getElementById('file_input_nodearray');
                var files = file_input.files;
                if (files.length > 0) {
                    var file_data = files[0];
                    jsMind.util.file.read(file_data, function (jsmind_data, jsmind_name) {
                        var mind = jsMind.util.json.string2json(jsmind_data);
                        if (!!mind) {
                            _jm.show(mind);
                        } else {
                            prompt_info('can not open this file as mindmap');
                        }
                    });
                } else {
                    prompt_info('please choose a file first');
                }
            }

            function get_freemind_data() {
                var mind_data = _jm.get_data('freemind');
                var mind_string = jsMind.util.json.json2string(mind_data);
                alert(mind_string);
            }

            function save_freemind_file() {
                var mind_data = _jm.get_data('freemind');
                var mind_name = mind_data.meta.name || 'freemind';
                var mind_str = mind_data.data;
                jsMind.util.file.save(mind_str, 'text/xml', mind_name + '.mm');
            }

            function open_freemind() {
                var file_input = document.getElementById('file_input_freemind');
                var files = file_input.files;
                if (files.length > 0) {
                    var file_data = files[0];
                    jsMind.util.file.read(file_data, function (freemind_data, freemind_name) {
                        if (freemind_data) {
                            var mind_name = freemind_name;
                            if (/.*\.mm$/.test(mind_name)) {
                                mind_name = freemind_name.substring(0, freemind_name.length - 3);
                            }
                            var mind = {
                                meta: {
                                    name: mind_name,
                                    author: 'hizzgdev@163.com',
                                    version: '1.0.1',
                                },
                                format: 'freemind',
                                data: freemind_data,
                            };
                            _jm.show(mind);
                        } else {
                            prompt_info('can not open this file as mindmap');
                        }
                    });
                } else {
                    prompt_info('please choose a file first');
                }
            }

            function prompt_info(msg) {
                alert(msg);
            }

            open_empty();
        </script>
    </body>
</html>
